<template>
    <div class="ces-search">
        <el-form class="form" :model="FormData" ref="FormData" inline>

            <el-form-item v-for='item in tableCols' :label="item.label + ':'" :key='item.prop' :prop='item.prop'
                style="height:18px" :rules="item.WFStepSN.indexOf(StepSN) > -1 ? item.rulesRowDate : null"
                v-if="item.prop != 'isChecked'" class="formItem">
                <!-- <div style="display: none;">
                    {{ item.prop === 'MenuCode' ? item.IsWrite = '0' : '' }}
                </div> -->
                <!-- 输入框 -->

                <el-input v-if="(item.type == 'Input' || item.type == '39' || item.type == '40') && isHandle"
                    v-model="FormData[item.prop]" size="mini" :style="'width:' + item.width + 'px'"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true"
                    @focus="item.focus && item.focus(scope.row)" @keyup.native="handlechange(item.prop)"></el-input>

                <!-- 颜色 -->

                <el-color-picker v-if="item.type == 'ColorPicker' && isHandle" v-model="FormData[item.prop]" size="mini"
                    :style="'width:' + item.width + 'px'"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true"
                    @focus="item.focus && item.focus(scope.row)"
                    @keyup.native="handlechange(item.prop)"></el-color-picker>

                <!-- 下拉框 -->
                <el-select v-if="item.type == 'Select' && isHandle" v-model="FormData[item.prop]"
                    @change="handleOpen(item.prop)" size="mini" :style="'width:' + item.width + 'px'"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true">
                    <el-option v-for="ColsRow in item.ColsRowDate" :key="ColsRow.value" :label="ColsRow.label"
                        :value="ColsRow.value"></el-option>
                </el-select>
                <!-- 单选 -->
                <el-radio-group v-if="item.type == 'radio' && isHandle" v-model="FormData[item.prop]"
                    :style="'width:' + item.width + 'px'"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true" size="mini">

                    <el-radio :label="ColsRow.value" v-model="FormData[item.prop]"
                        v-for="ColsRow in item.ColsRowDate">{{ ColsRow.label }}</el-radio>

                </el-radio-group>

                <!-- 开窗 -->
                <el-input v-if="item.type == 'buttonopen' && isHandle" v-model="FormData[item.prop]" :disabled="true"
                    @change='item.change && item.change(scope.row)' size="mini" :style="'width:' + item.width + 'px'">
                    <el-button slot="append" icon="el-icon-search" @click="handleOpen(item.prop)"
                        :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true"
                        style="width:9px"></el-button>
                </el-input>

                <!-- 复选框 -->
                <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="FormData[item.prop]">
                    <el-checkbox v-for="ch in item.ColsRowDate" :label="ch.value" :key="ch.value">{{ ch.label
                        }}</el-checkbox>
                </el-checkbox-group>
                <!-- 日期 -->
                <el-date-picker v-if="item.type == 'Date'" v-model="FormData[item.prop]"></el-date-picker>
                <!-- 时间 -->
                <el-time-select v-if="item.type == 'Time'" v-model="FormData[item.prop]" type=''></el-time-select>
                <!-- 日期时间 -->
                <el-date-picker v-if="item.type == 'datetime'" type='datetime' v-model="FormData[item.prop]"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true"
                    :style="'width:' + item.width + 'px'" size="mini"></el-date-picker>

                <!-- 日期时间 -->
                <el-date-picker v-if="item.type == 'month'" type='month' v-model="FormData[item.prop]"
                    :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? false : true"
                    :style="'width:' + item.width + 'px'" size="mini"></el-date-picker>

                <!-- 滑块 -->
                <!-- <el-slider v-if="item.type==='Slider'" v-model="FormData[item.prop]"></el-slider> -->
                <!-- 开关 -->
                <el-switch v-if="item.type === 'Switch'" v-model="FormData[item.prop]"></el-switch>

                <v-Getupload :disabled="item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1
            ? false
            : true
            " v-if="item.type == '26' || item.type == '6'" :uploadType="item.type == '26' ? 'picture-card' : 'text'"
                    :auto-upload='true' :rno="item.prop" :bill="FormData[billIDName]"
                    :key="new Date().getTime()"></v-Getupload>

            </el-form-item>



        </el-form>
        <el-form class="formT" inline v-if='isHandle'>
            <el-form-item v-for='(item, index) in searchHandle' :key="index">
                <el-button :type="item.type" :size="item.size || size" @click='item.handle()'>{{ item.label
                    }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import vGetupload from "../Common/Getupload";
export default {
    components: {
        vGetupload
    },
    props: {
        isHandle: {
            type: Boolean,
            default: true
        },
        labelWidth: {
            type: String,
            default: '100px'
        },
        size: {
            type: String,
            default: 'mini'
        },
        StepSN: { type: Int32Array, default: -1 },
        billIDName: { type: String, default: "" },//主键名称  用于上传附件用
        searchHandle: {
            type: Array,
            default: () => []
        },
        FormData: { type: Object },
        tableCols: { type: Array, default: () => [] },
    },
    data() {
        return {
        };
    },
    methods: {

        handleOpen(Name) { // 修改


            this.$emit('handleOpen', Name);

        }, handlechange(Name) { // 修改


            this.$emit('handlechange', Name);

        },

        validateForm() {
            let flag = null
            this.$refs['FormData'].validate(valid => {
                if (valid) {
                    flag = true
                } else {
                    flag = false
                }
            })
            return flag
        }

    }



}

</script>
<style lang="scss">
.ces-search {
    display: flex;
    justify-content: space-between;

    .formItem {


        .el-form-item__label {
            width: 120px !important;
        }

        .el-form-item {
            height: 20px !important;

        }
    }
}
</style>